<script setup>
import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";


const info = reactive({
  list:[
      {productId:"000",productName:"000",productType:"000",description:"000",premium:"000",deleteFlog:"1",productNum:"1001"}
  ],
  pageNum:1, //全局当前页
  pageSize:5, //全局每页大小
  total:0, //全局总条数
  dialogFormVisible:false, //窗口控制  该窗口默认隐藏
  form:{}, //表单数据
  isAdd:true ,//默认是增加功能
  likeInsProductType:"",//模糊查询保险产品类型
})

//查询列表数据
function load(){
//  查询保险产品信息
  axios({
    method:"get",
    url:"http://localhost:8080/boot/insProduct/getAllInsProductLikeIdAndTypeAndPageHelper",
    params:{
      productType:info.likeInsProductType,
      pageNum:info.pageNum,
      pageSize:info.pageSize
    }
  }).then((result)=>{
  // console.log(result.data)
  // info.list = result.data;
  let pageInfo=result.data;
  info.list=pageInfo.list;
  info.total=pageInfo.total;
  })
}

load()

//分页点击页码处理的方法
const handleCurrentChange = (number) => {
  info.pageNum = number //将点击的页码赋值给全局定义的当前页
  //再次重新查询
  load()
}
//处理当前每页多少条数据
const handleSizeChange = (number) => {
  info.pageSize = number
  load()
}
//点击增加按钮的方法
const save = () => {
  info.isAdd = true  //确定弹框标题  是添加信息
  //弹出窗口
  info.dialogFormVisible = true//  设置弹框弹出
}


//点击修改按钮操作 直接进行赋值操作
const handleEdit = (row) => {
  info.isAdd = false
  //1.先根据id查询最新的数据
  info.form.productId=row.productId
  info.form.productNum=row.productNum
  info.form.productName=row.productName
  info.form.productType=row.productType
  info.form.description=row.description
  info.form.premium=row.premium
  //弹窗
  info.dialogFormVisible = true
}
function handleDelete(index){
  axios({
    method: "get",
    url: "http://localhost:8080/boot/insProduct/deleteInsProductById",
    params:{
      productId:index
    }
  }).then((result)=>{
    if(result){
      ElMessage.success("删除成功")
    }else {
      ElMessage.error("删除失败")
    }
    handleClose()
    load()
  })
}

function persistence(){
  if(info.isAdd){
    Add()
  }else {
    update()
  }
}

const handleClose = () => {
  info.dialogFormVisible = false
  info.form = {}
}

function Add(){
  //先获取添加的数据
  axios({
    method:"get",
    url:"http://localhost:8080/boot/insProduct/saveInsProduct",
    params:info.form
  }).then((result)=>{
  if(result.data=="ok"){
    ElMessage({
      type:"success",
      message:"添加成功"
    })
    //关闭弹框 清空弹框中的数据 发起新查询
    handleClose()
    load()
  }
  })
}

function update(){
  //修改
  axios({
    method:"get",
    url:"http://localhost:8080/boot/insProduct/updateInsProduct",
    params:info.form
  }).then((result)=>{
    if(result.data){
      ElMessage.success("修改成功");
    }else {
      ElMessage.error("修改失败");
    }
    //关闭弹框 清空弹框中的数据 发起新查询
    handleClose()
    load()
  });

}

</script>

<template>
  <el-button type="success" @click="save">增加产品</el-button>
  <br><br>
  <!-- 查询的表单数据 -->
  <el-form :inline="true" :model="info.form" class="demo-form-inline">
    <el-form-item label="保险类型">
      <el-input v-model="info.likeInsProductType" placeholder="模糊查询" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load">查询</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格数据 -->
  <el-table :data="info.list" show-overflow-tooltip stripe border style="width: 100%">

    <el-table-column label="保险产品序列号" width="100" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.productId }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.productId }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="保险产品单号" width="100" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.productNum }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.productNum }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="保险名称" width="150" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.productName }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.productName }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="保险类型" width="150" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.productType }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.productType }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="产品描述" width="300" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.description }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.description }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="费用（每年）" width="200" >
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>{{ scope.row.premium }}</div>
          </template>
          <template #reference>
            <el-tag >{{ scope.row.premium }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" type="warning" @click="handleEdit(scope.row)"
        >修改</el-button>

        <el-popconfirm @confirm="handleDelete(scope.row.productId)" title="确定删除数据?">
          <template #reference>
            <el-button
                size="small"
                type="danger"
            >删除</el-button>
          </template>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>

  <br>
  <!-- 分页 -->
  <!--  current-page:当前页码
      page-size：步长
      total： 自动计算总页数
      @size-change:步长发生改变时触发函数
      @current-change：当前页发生变化  触发函数
-->
  <el-config-provider :locale="zhCn">
    <el-pagination
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </el-config-provider>

  <!-- 弹框窗口 -->
  <el-dialog v-model="info.dialogFormVisible" :before-close="handleClose" :title="info.isAdd?'增加信息':'修改信息'" width="60%">
    <el-form :model="info.form"  label-width="auto"  style="max-width: 900px;">
      <el-row>
        <el-form-item label="保险单号" style="margin-left: 35px">
          <el-input v-model="info.form.productNum"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="保险名" style="margin-left: 35px">
          <el-input v-model="info.form.productName"  autocomplete="off" />
        </el-form-item>
        <el-form-item label="保险类型" style="margin-left: 35px">
          <el-input v-model="info.form.productType" autocomplete="off" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="产品描述" style="margin-left: 35px">
          <el-input v-model="info.form.description" autocomplete="off" />
        </el-form-item>
        <el-form-item label="费用(每年)" style="margin-left: 35px">
          <el-input v-model="info.form.premium"  autocomplete="off" />
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="persistence">
          保存数据
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>